<template>
  <div class="container">
    <div class="left"></div>
    <div class="right">
      <div class="login-box">
        <div class="login-box-title">云·应用管理平台</div>
        <div class="flexCss" style="width: 60%; height: 40px; margin-top: 45px;">
          <div class="flexCss" style="width: 50px; height: 100%; align-items: center; justify-content: center; margin-left: -50px;">
            <el-icon><User /></el-icon>
          </div>
          <div class="flexCss" style="width: 100%; height: 100%;">
            <el-input v-model="form.account" size="large" placeholder="账号..." />
          </div>
        </div>
        <div class="flexCss" style="width: 60%; height: 40px; margin-top: 25px;">
          <div class="flexCss" style="width: 50px; height: 100%; align-items: center; justify-content: center; margin-left: -50px;">
            <el-icon><Lock /></el-icon>
          </div>
          <div class="flexCss" style="width: 100%; height: 100%;">
            <el-input v-model="form.password" size="large" placeholder="密码..." />
          </div>
        </div>

        <div class="remember-me-box">
          <div style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-start;">
            <el-checkbox v-model="remember" label="记住我" style="font-size: 16px; !important;"/>
          </div>
          <div style="width: 50%; height: 100%; display: flex; align-items: center; justify-content: flex-end;">
            <div style="color: dodgerblue">忘记密码?</div>
          </div>
        </div>
        <el-button color="#626aef" :loading="loading" :disabled="loading" style="width: 60%; height: 40px; margin-top: 15px;" @click="onSubmit">登录</el-button>
        <div style="width: 60%; height: 40px; margin-top: 15px;" >
          <el-divider content-position="center">其他登录方式</el-divider>
        </div>
        <div class="flexCss" style="width: 60%; height: 40px; margin-top: 15px; justify-content: center; align-items: center;" >
          <svg-icon width="2.2em" height="2.2em" name="QQ" />
          <svg-icon width="2.2em" height="2.2em" name="WeChat" style="margin-left: 15px;"/>
          <svg-icon width="2.2em" height="2.2em" name="Phone" style="margin-left: 15px;"/>
          <svg-icon width="2.2em" height="2.2em" name="Email" style="margin-left: 15px;"/>
        </div>
      </div>
    </div>
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="验证码"
    :width="280"
  >
    <div class="captcha-box">
      <slide-verify
        :l="36"
        :r="4"
        :w="240"
        :h="140"
        :slider-text="`向右拖动→`"
        :accuracy="0.8"
        :img="loadCaptchaImg"
        @again="onAgain"
        @success="onSuccess"
        @fail="onFail"
        @refresh="onRefresh"
      />
    </div>
  </el-dialog>
</template>

<script setup>
  import { ref, getCurrentInstance } from 'vue'
  import { login, loadCaptchaImg } from '@/api/auth/auth'
  // import { getUserInfo } from '@/api/user/user'
  // import { useStore } from 'vuex'
  import SlideVerify from 'vue3-slide-verify'
  import 'vue3-slide-verify/dist/style.css'
  import { User, Lock } from '@element-plus/icons-vue'

  // const store = useStore()
  const { appContext } = getCurrentInstance() // 获取当前实例的上下文
  const message = appContext.config.globalProperties.$message // 获取全局 $message
  const router = appContext.config.globalProperties.$router // 获取全局 $router

  const remember = ref(false)
  const loginFlag = ref(false)
  const loading = ref(false)
  const form = ref({
    account: 'huamoxi',
    password: 'huamoxi@123'
  })

  // 验证码显示控制
  const dialogVisible = ref(false)
  const onRefresh = () => {
    // 刷新验证码

  }
  const onAgain = () => {
    // 验证失败
    message({
      message: '验证码错误',
      type: 'error'
    })
    dialogVisible.value = false
  }
  const onSuccess = () => {
    // 验证成功
    dialogVisible.value = false
    loginFlag.value = true

    if (!form.value.account) {
      message({
        message: '请输入账号',
        type: 'error'
      })
      return
    }
    if (!form.value.password) {
      message({
        message: '请输入密码',
        type: 'error'
      })
      return
    }
    if (loginFlag.value) {
      // 更改按钮状态
      loading.value = true
      // 登录接口调用
      login(form.value).then((res) => {
        if (res.code === 200) {
          // 登录成功 存储token并跳转到首页
          localStorage.setItem('token', res.data)

          // 获取用户信息
          // getUserInfo().then(rst => {
          //   if (rst.code === 200) {
          //     store.commit('setAdmin', rst.data.isAdmin)
          //     store.commit('setUser', rst.data)
          //     router.push({ name: 'Home' })
          //   }
          // })
          // router.push({ name: 'Home' })
        } else {
          message({
            message: res.message,
            type: 'error'
          })
        }
      }).catch((err) => {
        console.log(err)
        message({
          message: '登录失败',
          type: 'error'
        })
      }).finally(() => {
        loading.value = false
        loginFlag.value = false
      })
    }
  }
  const onFail = () => {
    // 验证失败
    message({
      message: '验证码错误',
      type: 'error'
    })
    dialogVisible.value = false
  }

  // 登录
  const onSubmit = () => {
    // dialogVisible.value = true
    router.push({ name: 'Home' })
  }

</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .left {
    width: 60%;
    height: 100%;
    background-image: url("@/assets/login-bg.png");
    background-size: cover;
    background-position: center;
  }

  .right {
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .login-box {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -10%; /* 向上移动 */
  }

  .login-box-title {
    width: 40%;
    height: 40px;
    font-weight: bold;
    font-size: 35px;
    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    color: black;
    text-align: center;
  }

  .remember-me-box {
    width: 60%;
    height: 40px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .captcha-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flexCss {
    display: flex;
  }

  :deep(.el-checkbox .el-checkbox__label) {
    font-size: 16px;
  }
</style>
